<template>
  <div class="scroll-wrapper" @scroll="remember()" ref="myarticle">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh" :success-duration="1000" :success-text="downSuccessText">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in articleList" :key="item.aut_id.toString()" :title="item.title"  @click="$router.push({name:'article',params:{aid:item.art_id.toString()}})">
          <template slot="label">
            <van-grid
              :column-num="item.cover.type"
              :gutter="10"
              :border="false"
              v-if="item.cover.type>0"
            >
              <van-grid-item v-for="item2 in item.cover.type" :key="item2">
                <van-image width="85" :src="item.cover.images[item2-1]" lazy-load></van-image>
              </van-grid-item>
            </van-grid>
            <p>
              <van-icon
                name="close"
                style="float:right"
                @click.stop="displayDialog(item.art_id.toString())"
              ></van-icon>
              <span>作者:{{item.aut_name}}</span>
              &nbsp;
              <span>评论 :{{item.comm_count}}</span>
              &nbsp;
              <span>时间:{{item.pubdate | formatTime}}</span>
              &nbsp;
            </p>
          </template>
        </van-cell>
      </van-list>
    </van-pull-refresh>
    <more-action
      v-model="showDialog"
      :articleID="nowArticleID"
      @dislikeSucces="handleDislikeSuccess"
    ></more-action>
  </div>
</template>

<script>
import Vue from 'vue'
import { Lazyload } from 'vant'
import MoreAction from './com-moreaction.vue'
import { apiArticleList } from '@/api/article.js'
Vue.use(Lazyload)
export default {
  name: 'com-article',
  components: {
    MoreAction
  },
  props: {
    channelID: {
      type: Number,
      required: true
    }
  },
  data () {
    return {
      qianTop: 0,
      downSuccessText: '',
      nowArticleID: '',
      showDialog: false,
      list: [],
      isLoading: false,
      loading: false,
      finished: false,
      ts: Date.now(),
      articleList: []
    }
  },
  created () {
    this.getArticleList()
  },
  activated () {
    if (this.qianTop) {
      this.$refs.myarticle.scrollTop = this.qianTop
    }
  },
  methods: {
    remember () {
      this.qianTop = this.$refs.myarticle.scrollTop
    },
    handleDislikeSuccess () {
      const index = this.articleList.findIndex(
        item => item.art_id.toString() === this.nowArticleID
      )
      this.articleList.splice(index, 1)
    },
    displayDialog (artID) {
      this.showDialog = true
      this.nowArticleID = artID
    },
    async getArticleList () {
      const obj = {
        channelsID: this.channelID,
        timestamp: this.ts
      }
      const res = await apiArticleList(obj)
      return res
    },
    async onRefresh () {
      await this.$sleep(800)
      const articles = await this.getArticleList()
      if (articles.results.length > 0) {
        this.articleList.unshift(...articles.results)
        this.ts = articles.pre_timestamp
        this.downSuccessText = '文章更新成功'
      } else {
        this.downSuccessText = '文章已经是最新的'
      }
      this.isLoading = false
    },
    async onLoad () {
      await this.$sleep(800)
      const articles = await this.getArticleList()
      if (articles.results.length > 0) {
        this.articleList.push(...articles.results)
        this.ts = articles.pre_timestamp
      } else {
        this.finished = true
      }
      this.loading = false
    }
  }
}
</script>

<style lang="less" scoped>
.scroll-wrapper {
  height: 100%;
  overflow-y: auto;
}
</style>
